<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .div1 span{width:400px;line-height:60px;background: #ccffff;display: inline-block;}
            .sheng,.shi,.xian{width: 400px;border:2px solid #000;display: inline-block;vertical-align: top;}
            .shi,.xian{display: none;}
            li{list-style-type: none;border-bottom: 1px dashed #007AFF;}
            li span{line-height: 40px;display: block;}
            .active{background: #007AFF;color:#fff;}
        </style>
        <script src="static/lib/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="div1">
            <span class="span1"></span>            
            <span class="span2"></span>
            <span class="span3"></span>
        </div>
        <div class="sheng">
            <ul></ul>
        </div>
        <div class="shi">
            <ul></ul>
        </div>
        <div class="xian">
            <ul></ul>
        </div>
        <script>
            $(document).on("click", ".sheng .item", function () {
                $(this).addClass("active").siblings().removeClass("active");
                $(".div1 .span1").text($(this).find("span").text());
                $(".shi ul").text("");
                City();
                $(".shi").css("display", "inline-block");
                var tick = setTimeout(function () {
                    $(".div1 .span2").text($(".shi .item:first-child").text());
                }, 00);
            });
            $(document).on("click", ".shi .item", function () {
                $(this).addClass("active").siblings().removeClass("active");
                $(".div1 .span2").text($(this).find("span").text());
                $(".xian ul").text("");
                County();
                var tack = setTimeout(function () {
                    if ($(".xian ul").text() !== "") {
                        $(".xian").css("display", "inline-block");
                        $(".div1 .span3").css("display", "inline-block");
                        $(".div1 .span3").text($(".xian .item:first-child").text());
                    } else {
                        $(".xian").hide();
                        $(".div1 .span3").hide();
                    }
                }, 50);
            });
            $(document).on("click", ".xian .item", function () {
                $(this).addClass("active").siblings().removeClass("active");
                $(".div1 .span3").text($(this).find("span").text());
            });
            var Province = function () {
                $.ajax({
                    url: "static/json/city.json",
                    success: function (data) {
                        var result = "";
                        for (i = 0; i < data.Area.length; i++) {
                            result += "<li class='item'><span>" + data.Area[i].name + "</span></li>";
                        }
                        $(".sheng ul").append(result);
                        $(".sheng ul li:first-child").click();
                        $(".shi ul li:first-child").click();
                    },
                    error: function () {
                        alert("ajax请求失败");
                    },
                    complete: function (XMLHttpRequest, textStatus) {
                        console.log(XMLHttpRequest.responseText);
                        console.log(textStatus);
                    }
                });
            };
            Province();
            var City = function () {
                $.ajax({
                    url: "static/json/city.json",
                    success: function (data) {
                        var result = "";
                        var name = $(".div1 .span1").text();
                        for (i = 0; i < data.Area.length; i++) {
                            if (data.Area[i].name === name) {
                                for (j = 0; j < data.Area[i].sub.length; j++) {
                                    if (data.Area[i].sub[j].name !== "其他") {
                                        result += "<li class='item'><span>" + data.Area[i].sub[j].name + "</span></li>";
                                    }
                                    ;
                                }
                                ;
                                $(".shi ul").append(result);
                                $(".shi ul li:first-child").click();
                            }
                        }
                    },
                    error: function () {
                        alert("ajax请求失败");
                    },
                    complete: function (XMLHttpRequest, textStatus) {
                        console.log(XMLHttpRequest.responseText);
                        console.log(textStatus);
                    }
                });
            };
            var County = function () {
                $.ajax({
                    url: "static/json/city.json",
                    success: function (data) {
                        var result = "";
                        var name1 = $(".div1 .span1").text();
                        var name2 = $(".div1 .span2").text();
                        for (i = 0; i < data.Area.length; i++) {
                            if (data.Area[i].name === name1) {
                                for (j = 0; j < data.Area[i].sub.length; j++) {
                                    if (data.Area[i].sub[j].name === name2) {
                                        for (m = 0; m < data.Area[i].sub[j].sub.length; m++) {
                                            if (data.Area[i].sub[j].sub[m].name !== "其他") {
                                                result += "<li class='item'><span>" + data.Area[i].sub[j].sub[m].name + "</span></li>";
                                            }
                                            ;
                                        }
                                        ;
                                        $(".xian ul").append(result);
                                        $(".xian ul li:first-child").click();
                                    }
                                }
                                ;
                            }
                        }
                    },
                    error: function () {
                        alert("ajax请求失败");
                    },
                    complete: function (XMLHttpRequest, textStatus) {
                        console.log(XMLHttpRequest.responseText);
                        console.log(textStatus);
                    }
                });
            };
        </script>
    </body>
</html>
